<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #tank {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 100px;
        }

        #tank2 {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 200px;
        }
    </style>
</head>
<body>
<img src="img/tank_up.png" id="tank">
<img src="img/tank_up.png" id="tank2">
<script>
    var tank = document.getElementById('tank')
    var tank2 = document.getElementById('tank2')
    var flag = true
    document.onkeydown = function (ev) {
        if (!flag) {
            return
        }
        switch (ev.keyCode) {
            case 37:
                //左
                tank.style.left = tank.offsetLeft - 10 + 'px'
                tank.src = 'img/tank_left.png'
                if (tank.offsetLeft <= 0) {
                    flag = false
                    tank.src = 'img/bom.jpg'
                }
                break
            case 38:
                //上
                tank.style.top = tank.offsetTop - 10 + 'px'
                tank.src = 'img/tank_up.png'
                break
            case 39:
                //右
                tank.style.left = tank.offsetLeft + 10 + 'px'
                tank.src = 'img/tank_right.png'
                break
            case 40:
                //下
                tank.style.top = tank.offsetTop + 10 + 'px'
                tank.src = 'img/tank_down.png'
                break
            //2号机
            case 65:
                //左
                tank2.style.left = tank2.offsetLeft - 10 + 'px'
                tank2.src = 'img/tank_left.png'
                if (tank2.offsetLeft <= 0) {
                    flag = false
                    tank2.src = 'img/bom.jpg'
                }
                break
            case 87:
                //上
                tank2.style.top = tank2.offsetTop - 10 + 'px'
                tank2.src = 'img/tank_up.png'
                break
            case 68:
                //右
                tank2.style.left = tank2.offsetLeft + 10 + 'px'
                tank2.src = 'img/tank_right.png'
                break
            case 83:
                //下
                tank2.style.top = tank2.offsetTop + 10 + 'px'
                tank2.src = 'img/tank_down.png'
                break


        }
        checkBoom()
    }

    function checkBoom() {
        var x1 = tank.offsetLeft
        var x2 = tank2.offsetLeft + 50

        if (x1 > x2) {
            x1 += 50
        } else {
            x2 += 50
        }



        var x = Math.abs(x1 - x2)

        var y1 = tank.offsetTop
        var y2 = tank2.offsetTop
        var y = Math.abs(y1 - y2)
        if (x <= 50 && y <= 50) {
            //碰上了
            flag = false
            tank.src = 'img/bom.jpg'
            tank2.src = 'img/bom.jpg'
        }
    }
</script>
</body>
</html>